import React from 'react'
import { Table, Card, Icon, Collapse } from 'antd'
import Styles from '../../../finance/common/detail/Index.less'
import { fetchPost } from '../../../../utils/request'
const Panel = Collapse.Panel;

class AppLists extends React.Component {
  constructor (props) {
    super(props)
    this.state = {
      userId: props.userId,
      loading: false,
      list: [],
      abnormal: 0,
      total: 0,
      message: '',
      timer: null
    }
  }

  componentWillReceiveProps (props) {
    if (this.state.userId !== props.userId) {
      this.setState({
        userId: props.userId
      }, () => {
        this.getData()
      })
    }
  }

  componentDidMount () {
    this.getData()
  }

  getData () {
    this.setState({
      loading: true
    })
    if (this.state.userId) {
      fetchPost(`/user/${this.state.userId}/app/appList`).then(json => {
        if (json.code === 0) {
          if (json.data != null) {
            this.setState({
              list: json.data.list,
              total: json.data.total,
              abnormal: json.data.abnormal,
              loading: false
            })
          }
        } else {
          this.setState({
            list: [],
            loading: false,
            message: json.msg
          })
        }
      })
    } else {
      this.setState({
        list: [],
        loading: false
      })
    }
  }

  message () {
    if (this.state.message) {
      this.state.timer = setTimeout(() => {
        this.setState({
          message: ''
        })
      }, 3000)
      return (
        <span className='color-warning warning-animate'><Icon type='info-circle-o' />                                {this.state.message}</span>
      )
    } else {
      return ''
    }
  }


  showAppListTitle () {
    return (
      <div style={{display: 'inline-block'}}>
        App List &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        Total:{this.state.total}&nbsp;&nbsp;
        Abnormal:{this.state.abnormal}&nbsp;&nbsp;
      </div>
    )
  }


  componentWillUnmount () {
    clearTimeout(this.state.timer)
  }

  render () {
    const columns = [
      {
        title: 'APP name',
        dataIndex: 'appName',
        key: 'appName'
      },
      {
        title: 'Label',
        dataIndex: 'label',
        key: 'label'
      }
    ]

    return (
      <div className={Styles.PhoneRemarkRecord}>
        <Collapse defaultActiveKey={['1']}>
          <Panel header={this.showAppListTitle()} key="1">
              <Table
                pagination={false}
                size='small'
                bordered
                dataSource={this.state.list}
                columns={columns}
                loading={this.state.loading}
              />
          </Panel>
        </Collapse>

      </div>

    )
  }
}

export default AppLists
